<template>
  <div class="pageBox">
    <div class="page">
      <div class="headTitle flex-space-around">
        <pageSelect :NameOfDevice="sensorName" :arrayList="sensorList" @jump="SelectSensor"></pageSelect>
        <pageBorder :titleName="systemName"></pageBorder>
        <pageBorder></pageBorder>
      </div>
      <div class="container">
        <div class="info">
          <div>
            <ChargingPileBorder>
              <div slot="title">充电站信息</div>
              <div slot="container">
                  <ChargingStation/>
              </div>
            </ChargingPileBorder>
          </div>

          <div>
            <ChargingPileBorder>
              <div slot="title">实时信息</div>
              <div slot="container">
                <info />
              </div>
            </ChargingPileBorder>
          </div>
          <div  class="map">
              <maps :sensorArr="sensorArr" :OffLine="OffLine" :OLine="OLine" />
          </div>
        </div>
      </div>
      <div class="data">
          <div class="charts">
            <div>充电金额</div>
            <Histogram :GradualFlag="true"/>
          </div>
          <div class="DataInfo">
            <div class="table1 tableTile">
              <div> 充电桩可用状态</div>
              <dataTable></dataTable>
            </div>
            <div class="table2 tableTile">
              <div> 告警状态</div>
              <warningTable/>
            </div>
          </div>
      </div>
    </div>
  </div>
</template>
<script>
import pageBorder from "@/components/page/pageBorder";
import pageSelect from "@/components/page/pageSelect";
import ChargingPileBorder from "@/components/page/ChargingPile/ChargingPileBorder";
import maps from "@/components/page/pageMap";
import Histogram from "@/components/charts/Histogram"
import ChargingStation from "./children/ChargingStation"
import info from "./children/info"
import dataTable from "./children/dataTable"
import warningTable from "./children/warningTable"
export default {
  props: ["systemName"],
  components: {
    pageBorder,
    pageSelect,
    ChargingPileBorder,
    maps,
    ChargingStation,
    info,
    Histogram,
    dataTable,
    warningTable
  },
  data() {
    return {
      sensorArr: [],
      OffLine: "",
      OLine: "",
      sensorList: [
        {
          name: "充电桩1",
          id: "1"
        }
      ],
      sensorName: {
        name: "充电桩1",
        id: "1"
      }
    };
  },
  methods: {
    SelectSensor() {}
  }
};
</script>
<style  scoped>
.pageBox {
  width: 100%;
  height: 100%;
  background: #121212;
}
.page {
  width: 1822px;
  height: 100%;
  background: #121212;
  margin: auto;
}
.container {
  margin-top: 42px;
  display: flex;
}

.headTitle {
  padding-top: 22px;
}
.flex-space-around {
  display: flex;
  justify-content: space-around;
}
.info {
    width: 100%;
  display: flex;
 justify-content: space-between ;
}
.map {
  width: 644px;
  height: 416px;
}
.data {
  display: flex;
 justify-content: space-between ;

  margin-top: 30px;
}
.charts {
  background: url("../../assets/image/page/1586329312.png");
  width: 644px;
  height: 475px;
}
.charts div{
  color: aliceblue;
  font-size: 24px;
  padding-top: 33px;
  padding-left: 13px;
}
.DataInfo {
  background: url("../../assets/image/page/data.png");
  width: 1131px;
  height: 475px;
  display: flex;
}
.tableTile{
   color: aliceblue;
  font-size: 24px;
  padding-top: 33px;
  padding-left: 13px;
  margin-bottom: 14px;
  overflow: hidden;
  
}
.tableTile >div {
margin-bottom: 13px;
}
.table1 {
  width: 558px;
  height: 422px;
 
}
.table2 {
    width: 517px;
   height: 422px;

}
</style>